/* ============================================================
   YALCO — BUILDING AFRICA — Landing Page
   Design system v2
   ============================================================ */

:root {
  /* --- Couleurs --- */
  --ink: #060F1A;            /* fond principal, quasi noir-bleu */
  --surface: #0E2235;        /* surfaces élevées : cartes, header */
  --surface-2: #142B42;      /* surfaces encore au-dessus */
  --line: #1F3A55;           /* bordures, séparateurs */
  --orange: #E8852C;         /* signature de marque */
  --orange-bright: #FFB86B;  /* accent lumineux, hover */
  --orange-deep: #C2691B;    /* pressed */
  --azure: #5C9EAD;          /* bleu pétrole, usage très restreint */
  --cream: #F7F4EE;          /* texte clair chaud */
  --cream-dim: #A8B3C2;      /* texte secondaire sur fond sombre */
  --white: #FFFFFF;

  /* --- Typo --- */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- Échelle --- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;
  --s-7: 9rem;

  --max-w: 1240px;
  --radius: 3px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--cream);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}

/* ============================================================
   Typographie
   ============================================================ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  color: var(--orange-bright);
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--orange);
  display: inline-block;
}

.eyebrow-num {
  font-family: var(--font-mono);
  color: var(--cream-dim);
}

p { color: var(--cream-dim); }

.section-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
}

.section-lede {
  max-width: 600px;
  font-size: 1.05rem;
  color: var(--cream-dim);
}

/* ============================================================
   Boutons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  padding: 0.95em 1.8em;
  border-radius: var(--radius);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease, border-color .2s ease;
}

.btn-primary { background: var(--orange); color: var(--ink); }
.btn-primary:hover { background: var(--orange-bright); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(232,133,44,.45); }

.btn-ghost { background: transparent; color: var(--white); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--orange-bright); color: var(--orange-bright); }

/* Ghost button variant for use on light backgrounds (.section-light).
   The base .btn-ghost is tuned for dark sections (white text, dark
   border) and becomes invisible on a cream background. */
.section-light .btn-ghost {
  color: var(--ink);
  border: 1px solid #C9C2B2;
  background: rgba(255,255,255,0.5);
}
.section-light .btn-ghost:hover {
  border-color: var(--orange-deep);
  color: var(--orange-deep);
  background: rgba(255,255,255,0.85);
}

.btn-arrow { transition: transform 0.25s ease; display: inline-block; }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(6,15,26,0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.nav-logo { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.nav-logo img { height: 48px; width: auto; max-width: 220px; }

@media (min-width: 600px) {
  .nav-logo img { height: 56px; }
}

.nav-links { display: none; align-items: center; gap: var(--s-4); }

.nav-links a {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}

.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a.active::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--orange);
}

.nav-actions { display: flex; align-items: center; gap: var(--s-2); }

.lang-switch {
  display: flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.lang-switch button { padding: 0.45em 0.75em; color: var(--cream-dim); transition: background 0.2s ease, color 0.2s ease; }
.lang-switch button.active { background: var(--orange); color: var(--ink); }

.nav-cta { display: none; }

.nav-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 28px; height: 22px;
}
.nav-toggle span { display: block; height: 2px; background: var(--white); border-radius: 2px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: min(82vw, 360px);
  background: var(--surface);
  border-left: 1px solid var(--line);
  z-index: 99;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  display: flex; flex-direction: column;
  padding: 6.5rem var(--s-4) var(--s-4);
  gap: var(--s-3);
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.2rem; font-weight: 700;
  color: var(--white); padding: 0.6rem 0; border-bottom: 1px solid var(--line);
}
.mobile-menu .btn { margin-top: var(--s-3); justify-content: center; }

.menu-backdrop {
  position: fixed; inset: 0; background: rgba(6,15,26,0.65); z-index: 98;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.menu-backdrop.open { opacity: 1; visibility: visible; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* ============================================================
   Progress rail — signature element
   Silhouette Africa filled like a gauge as the user scrolls
   ============================================================ */

.progress-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  width: 30px;
  height: 38vh;
  max-height: 320px;
  display: none;
  align-items: center;
  justify-content: center;
}

.progress-rail svg { width: 100%; height: 100%; }

@media (min-width: 1100px) {
  .progress-rail { display: flex; }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 6.5rem;
  overflow: hidden;
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}

@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero-bg-wash {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 1000px 700px at 78% 8%, rgba(232,133,44,0.10) 0%, transparent 60%),
    linear-gradient(165deg, var(--ink) 0%, #0a1d2e 60%, #0c2230 100%);
}

.hero-tag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: rgba(232,133,44,0.1);
  border: 1px solid rgba(232,133,44,0.35);
  color: var(--orange-bright);
  font-family: var(--font-mono);
  font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 0.72rem;
  padding: 0.5em 1em;
  border-radius: 100px;
  margin-bottom: var(--s-3);
}

.hero-title {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  max-width: 13ch;
  margin-bottom: var(--s-3);
}

.hero-title .line-accent { color: var(--orange-bright); }

.hero-subtitle {
  max-width: 500px;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--cream-dim);
  margin-bottom: var(--s-4);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  max-width: 480px;
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
}
@media (min-width: 600px) {
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
}

.hero-stat-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  color: var(--white); line-height: 1;
}
.hero-stat-num span { color: var(--orange-bright); }
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--cream-dim);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 0.4em;
}

/* Hero visual: photo + frame + floating card */
.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  max-width: 460px;
  margin: 0 auto;
}

.hero-visual-frame {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.hero-visual-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.03);
}

.hero-visual-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(195deg, rgba(6,15,26,0.05) 30%, rgba(6,15,26,0.55) 100%);
}

.hero-visual-tagcard {
  position: absolute;
  left: -18px;
  bottom: -22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-3);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6);
  max-width: 240px;
}

@media (max-width: 480px) {
  .hero-visual-tagcard { left: 0; bottom: -16px; padding: var(--s-2); max-width: 200px; }
}

.hero-visual-tagcard .tag-num {
  font-family: var(--font-display); font-weight: 700; color: var(--orange);
  font-size: 1.8rem; line-height: 1;
}
.hero-visual-tagcard .tag-label {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--cream-dim); text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 0.3em;
}

/* ============================================================
   Sectors marquee
   ============================================================ */

.sectors-strip {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) 0;
  overflow: hidden;
}

.sectors-track {
  display: flex; gap: var(--s-6);
  white-space: nowrap;
  animation: scroll-left 32s linear infinite;
  width: max-content;
}

@media (prefers-reduced-motion: reduce) {
  .sectors-track { animation: none; flex-wrap: wrap; white-space: normal; }
}

@keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.sectors-track span {
  font-family: var(--font-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.85rem; color: var(--cream-dim);
}
.sectors-track span.dot { color: var(--orange); }

/* ============================================================
   Section base
   ============================================================ */

.section { padding: var(--s-6) 0; position: relative; }

.section-light { background: var(--cream); color: var(--ink); }
.section-light h2, .section-light h3, .section-light h4 { color: var(--ink); }
.section-light p { color: #4A5563; }
.section-light .eyebrow { color: var(--orange-deep); }
.section-light .eyebrow::before { background: var(--orange-deep); }

.section-head { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: var(--s-5); }

/* ============================================================
   Pillars (4 cards)
   ============================================================ */

.pillars-grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 700px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); } }

.pillar-card { background: var(--surface); padding: var(--s-4) var(--s-3); transition: background .3s ease; }
.pillar-card:hover { background: var(--surface-2); }

.pillar-icon { width: 40px; height: 40px; margin-bottom: var(--s-3); }
.pillar-icon svg { width: 100%; height: 100%; stroke: var(--orange); fill: none; stroke-width: 1.6; }

.pillar-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.pillar-card p { font-size: 0.9rem; }

/* ============================================================
   About split w/ photo
   ============================================================ */

.split {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 0.9fr 1.1fr; }
  .split.reverse { direction: rtl; }
  .split.reverse > * { direction: ltr; }
}

.split-media { position: relative; }
.split-media-frame {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4/5;
}
.split-media-frame img { width: 100%; height: 100%; object-fit: cover; }

.value-list { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.value-item { display: flex; gap: 0.9rem; align-items: flex-start; }
.value-item .num { font-family: var(--font-mono); font-weight: 600; color: var(--orange); font-size: 0.85rem; min-width: 1.6em; padding-top: 0.2em; }
.value-item h4 { font-size: 1rem; text-transform: none; letter-spacing: 0; margin-bottom: 0.2rem; color: var(--white); }
.value-item p { font-size: 0.92rem; margin: 0; }

/* ============================================================
   Training divisions
   ============================================================ */

.divisions-list {
  display: grid; gap: 1px;
  background: rgba(0,0,0,0.07); border: 1px solid rgba(0,0,0,0.09);
  border-radius: var(--radius); overflow: hidden;
}

.division-row {
  background: var(--white);
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  transition: background .2s ease;
}
@media (min-width: 800px) {
  .division-row { grid-template-columns: 64px 1.3fr 2fr; align-items: center; }
}
.division-row:hover { background: #FBF8F2; }

.division-index { font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem; color: var(--orange); opacity: 0.7; }
.division-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.02rem; color: var(--ink); letter-spacing: 0.01em; }

.division-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.division-tags span { font-size: 0.76rem; color: #5A6472; background: #F1EEE7; padding: 0.3em 0.7em; border-radius: 100px; white-space: nowrap; }

/* ============================================================
   Photo strip — credibility moment
   ============================================================ */

.photo-strip {
  display: grid; grid-template-columns: 1fr; gap: var(--s-2);
}
@media (min-width: 700px) {
  .photo-strip { grid-template-columns: repeat(3, 1fr); }
}

.photo-strip figure {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.photo-strip figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.photo-strip figure:hover img { transform: scale(1.04); }

.photo-strip figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-3);
  background: linear-gradient(0deg, rgba(6,15,26,0.92) 0%, transparent 100%);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--cream);
}

/* ============================================================
   Why choose us
   ============================================================ */

.why-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
}
@media (min-width: 900px) {
  .why-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
}

.why-list { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
@media (min-width: 560px) { .why-list { grid-template-columns: repeat(2, 1fr); } }

.why-list li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--cream);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}

.why-check {
  color: var(--orange);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

/* ============================================================
   Learners
   ============================================================ */

.learners-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.learner-tag {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #E4DFD3;
  padding: 0.7em 1.2em;
  border-radius: 100px;
}

/* ============================================================
   Commitment band
   ============================================================ */

.commitment {
  background: linear-gradient(135deg, var(--ink) 0%, #0c2433 100%);
  position: relative;
  padding: var(--s-6) 0;
}

.commitment-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--white);
  max-width: 740px;
  line-height: 1.25;
  text-transform: none;
}
.commitment-quote .accent { color: var(--orange-bright); }

/* ============================================================
   CTA band
   ============================================================ */

.cta-band { background: var(--orange); padding: var(--s-5) 0; }
.cta-band-inner {
  display: flex; flex-direction: column; gap: var(--s-3);
  align-items: flex-start; justify-content: space-between;
}
@media (min-width: 800px) { .cta-band-inner { flex-direction: row; align-items: center; } }

.cta-band h2 { color: var(--ink); font-size: clamp(1.7rem, 3.4vw, 2.3rem); max-width: 480px; }
.cta-band .btn-primary { background: var(--ink); color: var(--white); flex-shrink: 0; }
.cta-band .btn-primary:hover { background: var(--surface-2); }

/* ============================================================
   Footer
   ============================================================ */

.site-footer { background: var(--ink); border-top: 1px solid var(--line); padding: var(--s-6) 0 var(--s-2); }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-5); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--s-3);
}
.footer-logo img { height: 64px; width: auto; max-width: 240px; }
.footer-about p { max-width: 320px; font-size: 0.92rem; }

.footer-col h4 {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--orange-bright); margin-bottom: var(--s-2); font-weight: 600;
}
.footer-col ul { display: grid; gap: 0.6rem; }
.footer-col a, .footer-col p { font-size: 0.92rem; color: var(--cream-dim); transition: color .2s ease; }
.footer-col a:hover { color: var(--orange-bright); }

.footer-bottom {
  border-top: 1px solid var(--line); padding-top: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.76rem; color: var(--cream-dim);
}
@media (min-width: 700px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }

/* ============================================================
   Scroll-reveal: fade + blur-to-sharp
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform, filter;
}
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* staggered children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(5px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1), filter 0.8s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.visible > * { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.03s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.17s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.31s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.38s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.45s; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.52s; }

/* Fallback: ensure content visible if JS hasn't run */
body:not(.js-ready) .reveal,
body:not(.js-ready) .reveal-stagger > * {
  opacity: 1; transform: none; filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { transition: none !important; filter: none !important; }
}

/* ============================================================
   Page hero (secondary pages: About, Training, etc.)
   ============================================================ */

.page-hero {
  position: relative;
  padding-top: 11rem;
  padding-bottom: var(--s-6);
  overflow: hidden;
}

.page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 900px 500px at 85% 0%, rgba(232,133,44,0.09) 0%, transparent 60%),
    linear-gradient(165deg, var(--ink) 0%, #0a1d2e 60%, #0c2230 100%);
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero-title {
  font-size: clamp(2.4rem, 5.6vw, 3.8rem);
  max-width: 16ch;
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
}
.page-hero-title .line-accent { color: var(--orange-bright); }

.page-hero-subtitle {
  max-width: 560px;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--cream-dim);
}

/* ============================================================
   Founder card with reserved photo slot
   ============================================================ */

.founder-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.founder-photo-slot {
  aspect-ratio: 4/3;
  width: 100%;
  background:
    repeating-linear-gradient(45deg, var(--surface-2) 0px, var(--surface-2) 1px, transparent 1px, transparent 14px),
    var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

/* Once the client uploads images/fondateur.jpg, this rule makes it
   fill the reserved frame cleanly (cropped, no distortion).
   Recommended source photo: portrait or landscape, minimum 800x600px,
   the frame itself is fixed at a 4:3 ratio so any photo gets cropped
   to match automatically. */
.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Shown only if images/fondateur.jpg fails to load (see onerror on
   the <img> tag above) — keeps the hatched placeholder look instead
   of a broken-image icon until the real photo is uploaded. */
.founder-photo-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  text-align: center;
}

.founder-photo-hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
  background: rgba(6,15,26,0.7);
  padding: 0.6em 1em;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.founder-info { padding: var(--s-4); }
.founder-info h3 {
  font-size: 1.3rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.3rem;
}
.founder-role {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange-bright);
  margin-bottom: var(--s-3);
}
.founder-quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--cream);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  border-left: 2px solid var(--orange);
  padding-left: var(--s-2);
}

/* Recommended photo spec, documented inline for the client's reference */
.founder-photo-slot::after {
  content: '';
}

/* ============================================================
   Vision & Mission grid
   ============================================================ */

.vm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 900px) {
  .vm-grid { grid-template-columns: 1fr 1fr; }
}

.vm-card p { font-size: 1rem; }

.mission-list {
  margin-top: var(--s-3);
  display: grid;
  gap: 0.65rem;
}
.mission-list li {
  position: relative;
  padding-left: 1.4em;
  font-size: 0.95rem;
  color: #4A5563;
}
.mission-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 1px;
}

/* ============================================================
   Values grid (7 values)
   ============================================================ */

.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .values-grid { grid-template-columns: repeat(4, 1fr); }
}

.value-card {
  background: var(--surface);
  padding: var(--s-4) var(--s-3);
  transition: background .3s ease;
}
.value-card:hover { background: var(--surface-2); }

.value-num {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--orange);
  font-size: 0.85rem;
  display: block;
  margin-bottom: var(--s-2);
  opacity: 0.8;
}

.value-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.value-card p { font-size: 0.88rem; }

.value-card-closing {
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.value-card-closing:hover { background: var(--orange-bright); }
.value-closing-text {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
}

/* ============================================================
   Pillars timeline (3 steps, sequential — order carries meaning)
   ============================================================ */

.pillars-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  position: relative;
}
@media (min-width: 900px) {
  .pillars-timeline { grid-template-columns: repeat(3, 1fr); }
  .pillars-timeline::before {
    content: '';
    position: absolute;
    top: 28px; left: 0; right: 0;
    height: 1px;
    background: #E4DFD3;
    z-index: 0;
  }
}

.pillar-step {
  position: relative;
  z-index: 1;
  background: var(--cream);
}

.pillar-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--orange-bright);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: var(--s-3);
}

.pillar-step h3 {
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.6rem;
}
.pillar-step p { font-size: 0.92rem; }

/* ============================================================
   Training overview grid (quick anchor nav to divisions)
   ============================================================ */

.overview-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 700px) {
  .overview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .overview-grid { grid-template-columns: repeat(3, 1fr); }
}

.overview-card {
  background: var(--surface);
  padding: var(--s-4) var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  transition: background .25s ease, transform .25s ease;
}
.overview-card:hover { background: var(--surface-2); transform: translateX(4px); }

.overview-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--orange);
  opacity: 0.75;
  flex-shrink: 0;
}

.overview-card h3 {
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}

/* ============================================================
   Division detail sections (alternating photo + content)
   ============================================================ */

.division-section { scroll-margin-top: 90px; }

.division-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 900px) {
  .division-detail { grid-template-columns: 0.85fr 1.15fr; }
  .division-detail.reverse { direction: rtl; }
  .division-detail.reverse > * { direction: ltr; }
}

.division-detail-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--orange-bright);
  letter-spacing: 0.08em;
  margin-bottom: var(--s-2);
}
.section-light .division-detail-num { color: var(--orange-deep); }

/* ============================================================
   Reserved photo slot — square, ready for client-provided images.
   To use: replace the <div class="photo-slot-square"> content with
   <img src="images/your-photo.jpg" alt="..."> at a 1:1 (square) ratio,
   recommended minimum 800x800px.
   ============================================================ */

/* ============================================================
   Reserved photo slot — square, ready for client-provided images.
   Each <img class="photo-slot-img"> already points to its final
   path (e.g. images/formation-01-industrie.jpg). As long as the
   file doesn't exist, onerror hides the broken-image icon and
   reveals the hatched placeholder with the exact path expected —
   drop the file at that path and it displays automatically,
   cropped to fill the square frame (no distortion).
   ============================================================ */

.photo-slot-square {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, var(--surface-2) 0px, var(--surface-2) 1px, transparent 1px, transparent 14px),
    var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

.photo-slot-square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.photo-slot-light {
  background:
    repeating-linear-gradient(45deg, #ECE7DC 0px, #ECE7DC 1px, transparent 1px, transparent 14px),
    #F1EEE7;
  border-color: #E4DFD3;
}

/* Shown only if the <img> above fails to load (see onerror attribute) */
.photo-slot-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  text-align: center;
}

.photo-slot-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--cream-dim);
  background: rgba(6,15,26,0.7);
  padding: 0.6em 1em;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  word-break: break-all;
}
.photo-slot-light .photo-slot-hint {
  color: #6B7280;
  background: rgba(255,255,255,0.75);
  border-color: #D8D2C4;
}

/* ============================================================
   Program list (sub-programs within a division)
   ============================================================ */

.program-list {
  margin-top: var(--s-4);
  display: grid;
  gap: var(--s-3);
}

.program-item {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.section-light .program-item { border-bottom-color: #E4DFD3; }

.program-item:last-child { border-bottom: none; padding-bottom: 0; }

.program-item h4 {
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.section-light .program-item h4 { color: var(--ink); }

.program-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.program-tags span {
  font-size: 0.78rem;
  color: var(--cream-dim);
  background: var(--surface-2);
  padding: 0.35em 0.8em;
  border-radius: 100px;
  white-space: nowrap;
}
.section-light .program-tags span {
  color: #5A6472;
  background: #F1EEE7;
}

/* ============================================================
   i18n visibility (FR default, EN on demand)
   ------------------------------------------------------------
   FIX: la version précédente ne basculait que les <span>, <a>
   et <strong> en display:inline pour l'anglais — tous les
   <h1>-<h4> et <p> portant data-lang="en" restaient cachés
   même en mode EN, et leur version FR ne se cachait pas non
   plus. On gère ici TOUS les éléments, en respectant le
   display naturel de chaque type de balise (inline vs block
   vs inline-flex pour les cas spéciaux déjà stylés ailleurs).
   ============================================================ */

/* Par défaut (FR) : tout ce qui est marqué EN est caché */
[data-lang="en"] { display: none; }

/* Quand <html lang="en"> est actif : on inverse proprement */
html[lang="en"] [data-lang="fr"] { display: none; }

/* On réaffiche l'EN avec le display qui convient à chaque type de tag */
html[lang="en"] [data-lang="en"] { display: revert; }

/* revert peut se comporter de façon inégale selon les navigateurs
   pour certains éléments custom ou interactifs : on sécurise les
   cas utilisés sur le site avec des valeurs explicites. */
html[lang="en"] h1[data-lang="en"],
html[lang="en"] h2[data-lang="en"],
html[lang="en"] h3[data-lang="en"],
html[lang="en"] h4[data-lang="en"],
html[lang="en"] p[data-lang="en"],
html[lang="en"] li[data-lang="en"],
html[lang="en"] div[data-lang="en"] { display: block; }

html[lang="en"] span[data-lang="en"],
html[lang="en"] a[data-lang="en"]:not(.btn):not(.overview-card):not(.learner-tag),
html[lang="en"] strong[data-lang="en"] { display: inline; }

/* Cas où l'élément EN doit garder un display particulier
   (boutons, cartes, liens flex, listes de tags) */
html[lang="en"] a.btn[data-lang="en"],
html[lang="en"] a.overview-card[data-lang="en"] { display: inline-flex; }

html[lang="en"] span.learner-tag[data-lang="en"],
html[lang="en"] span.program-tags[data-lang="en"] { display: inline-flex; }

/* ============================================================
   Overview card closing variant (orange CTA card filling
   the last grid slot when item count isn't a clean multiple)
   ============================================================ */

.overview-card-closing {
  background: var(--orange);
}
.overview-card-closing:hover {
  background: var(--orange-bright);
  transform: translateX(4px);
}
.overview-card-closing .overview-num {
  color: var(--ink);
  opacity: 1;
}
.overview-card-closing h3 {
  color: var(--ink);
}

/* ============================================================
   Pillars timeline — 4-step variant (Manpower "how it works")
   The base .pillars-timeline is tuned for 3 steps; this variant
   keeps the same visual language for a 4-step process so the
   connecting line spans the full row instead of wrapping.
   ============================================================ */

.pillars-timeline-4 {
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .pillars-timeline-4 { grid-template-columns: repeat(2, 1fr); }
  .pillars-timeline-4::before { display: none; }
}
@media (min-width: 1100px) {
  .pillars-timeline-4 { grid-template-columns: repeat(4, 1fr); }
  .pillars-timeline-4::before { display: block; }
}

/* ============================================================
   Footer social icons (Instagram, Facebook)
   ============================================================ */

.footer-social {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--s-3);
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--cream-dim);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
  flex-shrink: 0;
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
}

.footer-social-link:hover {
  color: var(--ink);
  background: var(--orange);
  border-color: var(--orange);
  transform: translateY(-2px);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--orange-bright);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .footer-social-link { width: 40px; height: 40px; }
  .footer-social-link svg { width: 19px; height: 19px; }
}